import React, { memo, useState, useEffect, useRef, useCallback } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { ShopWrapper } from "./style";
import Tabcontrol from "./child/tabcontrol";
import GoodsList from "./child/goods";
import { LockOutlined } from "@ant-design/icons";
import { getShopCategoryList, getShopGoodsList } from "@/service/shop";
export default memo(function Shop() {
  const [categoryList, setcategoryList] = useState([]);
  const [goodsList, setgoodsList] = useState([]);
  const getCategoryList = async () => {
    const res = await getShopCategoryList();
    setcategoryList(res.data);
  };

  const getGoodsList = async (id) => {
    const res = await getShopGoodsList(id);
    if(res.data){
      setgoodsList(res.data.result);
    }else{
      setgoodsList([]);
    }
   
  };



  useEffect(() => {
    document.title='一片月-商城'
    getCategoryList();
    getGoodsList(259455)
  }, []);

  const tabcontrolClick = (id) => {
    getGoodsList(id);
  };
  return (
    <ShopWrapper>
      <div className="shop-content">
        <div className="shop-left">
          <Tabcontrol
            tabcontrolClick={tabcontrolClick}
            categoryList={categoryList}
          ></Tabcontrol>
        </div>

        <div className="shop-right">
          <GoodsList goodsList={goodsList}></GoodsList>
        </div>
      </div>
    </ShopWrapper>
  );
});
